<script setup>
import TopArea from '@/components/TopArea.vue'
import BottomArea from '@/components/BottomArea.vue'
import { useControls } from '@/hooks/useControls' // 管理scene添加的地图控件的函数

import { onMounted, onBeforeUnmount, ref, provide } from 'vue'
// import Map from './views/Map.vue'
import mapboxgl from 'mapbox-gl' // 引入 Mapbox GL JS
import 'mapbox-gl/dist/mapbox-gl.css' // 引入 Mapbox GL JS 样式
import * as L7 from '@antv/l7' // 引入 L7

mapboxgl.accessToken =
  'pk.eyJ1IjoiY2hhbnRlcjc0MyIsImEiOiJjbGZxcDNveGswMG9tM3lwN2hjMTg5bGx5In0.SovjuhplDQIjmXaTqBMnzQ' // 替换为你的 Mapbox 访问令牌

let map = ref(null) // 定义 map 变量
let scene = ref(null) // 定义 scene 变量 L7地图实例
let removeControls = null // 存储移除地图控件的函数

// 在 setup 里立即 provide 响应式变量，而不是延迟到 onMounted
provide('mapScene', { map, scene })
onMounted(() => {
  map.value = new mapboxgl.Map({
    container: 'map', // 容器 ID
    style: 'mapbox://styles/mapbox/dark-v10', // 样式 URL
    center: [114.3055, 30.5928], // 武汉市中心坐标 [经度, 纬度]
    zoom: 1, // 缩放级别
    projection: 'globe', // 使用地球投影
    attributionControl: false, // 关闭 attribution 控件
  })
  map.value.on('style.load', () => {
    map.value.setFog({
      // 黑色雾效果
      'horizon-blend': 0.1,
    })

    // 当map开始旋转时，通过move事件监听center变化，改变大气雾明暗度
    map.value.on('move', () => {
      // 如果地图样式未加载完成，则不执行后续代码
      if (typeof map.value.isStyleLoaded === 'function' && !map.value.isStyleLoaded()) return
      const center = map.value.getCenter()
      map.value.setFog({
        color: `hsl(0, 0%, ${Math.abs(center.lng / 180)})`,
        'high-color': `hsl(0, 0%, ${Math.abs(center.lng / 180)})`,
      })
    })
  })

  // 创建 L7 场景 并绑定到 Mapbox 地图
  scene.value = new L7.Scene({
    id: 'map', // 容器 ID
    logoVisible: false, // 是否显示 L7 logo
    // L7.Mapbox 作用: 把 Mapbox GL JS 地图封装成 L7 可识别的地图服务。
    map: new L7.Mapbox({
      mapInstance: map.value, // 传入 Mapbox 地图实例
    }),
  })

  // 通过sence添加的地图控件就放这里 参数：地图实例 L7.Scene
  removeControls = useControls(map.value, scene.value)
})

onBeforeUnmount(() => {
  // 移除地图控件
  if (removeControls) removeControls()
  // 销毁 L7 场景
  if (scene.value) scene.value.destroy()
  // 销毁 Mapbox 地图
  if (map.value) map.value.remove()
})
</script>

<template>
  <TopArea />
  <div id="map"></div>
  <!-- 路由切换区域 -->
  <RouterView />
  <BottomArea />
</template>

<style scoped>
#map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
}
.l7-control-scale-line {
  max-width: 150px; /* 你需要的最大宽度 */
  min-width: 20px;
  transition: width 0.2s;
  /* 或其它必要的样式覆盖 */
}
</style>
